<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>预警人员</title>
		<link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style> .conpanyList li { width: 100%; height: 40px; line-height: 40px; padding: 0 20px; cursor: pointer; }  .conpanyList li:hover { background: #eee; }  .conpanyList li.active:hover, .conpanyList li.active { background: #17a3d7; color: #fff }  table { width: 100%; }  i.icon.icon_edit { height: 40px; }  i.icon.icon_delete { height: 40px; }  .hover i.icon.icon_edit { background-position: -79px -7px; }  .hover:hover i.icon.icon_edit { background-position: -539px 13px; }  .hover i.icon.icon_delete { background-position: -79px -48.5px; }  .hover:hover i.icon.icon_delete { background-position: -538px -28.5px; }  .w100 { width: 130px; padding-left: 20px; } .w70{width:70px;text-align: right;} </style>
	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/warningMenu.js" type="text/javascript" charset="utf-8"></script>
			<div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem">
							<a href="#">预警事件</a>
						</li>
						<li class="tabItem ">
							<a href="#">预警策略</a>
						</li>
						<li class="tabItem active">
							<a href="#">预警人员</a>
						</li>
						<li class="tabItem ">
							<a href="#">预警日志</a>
						</li>
					</ul>
				</div>

				<div class="page-container">
					<div style="padding: 20px 0;" class="over-hidden">
						<div class="fl" style="width:340px;margin-right:37px;border:1px solid #ddd">
							<ul class="conpanyList" id="companyList">

							</ul>
						</div>
						<div class="fl none conpanyListContainer" style="width:510px;border:1px solid #ddd">
							<table class="conpanyList" id="peopleList">

							</table>
							<div>
								<p class="text-center addPeople" style="line-height: 40px;color:#17a3d7;cursor: pointer;"  companyIndex="" companyId="" onclick="addPeople(this)">+添加</p>
							</div>
						</div>
					</div>

				</div>

			</div>
		</div>
		<div class="footer"> <div class="footercontainer"> <ul> <li> <a href="#">关于我们</a> </li> <li> <a href="#">服务与支持</a> </li> <li> <a href="#">常见问题</a> </li> <li> <a href="#">人才招聘</a> </li> <li> <a href="#">加盟合作</a> </li> </ul>  <div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div> </div>  </div>
	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/wdatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>

	<script>
		var companyList,currentPeopleList;
		//异步添加预警人员的方法
		function  ajaxAEPeople(companyId,peopleArray,id){
			console.log(id);
			if(id){ //编辑
				/*$.ajax({
				url:'' ,
				dataType: "JSON",
				type: "post",
				cache: false,
				async: false,
				data:peopleArray,
				success: function(data) {
					companyList = data;
				},
				error: function() {
					layer.close(loading);
					layer.msg('加载列表数据错误');
				}
			})*/
			}else{
				/*$.ajax({
				url:'' ,
				dataType: "JSON",
				type: "post",
				cache: false,
				async: false,
				data:peopleArray,
				success: function(data) {
					companyList = data;
				},
				error: function() {
					layer.close(loading);
					layer.msg('加载列表数据错误');
				}
				})*/
			}
			
		}
		//异步删除预警人员
		function ajaxDeletePeople(companyId,id){
			console.log(id);
		}
		//异步获取所属企业预警人员的方法
		function ajaxGetPeople(companyId){
			/*$.ajax({
				url: 'json/companyList.json',
				dataType: "JSON",
				type: "post",
				cache: false,
				async: false,
				success: function(data) {
					companyList = data;
				},
				error: function() {
					layer.close(loading);
					layer.msg('加载列表数据错误');
				}
			})*/
			return [{
				"id":11,
				"job":"KAIF",
				"name":"李建",
				"tel":"17589568956"
			},{
				"id":12,
				"job":"市场",
				"name":"李艳",
				"tel":"17589568956"
			},{
				"id":13,
				"job":"市场",
				"name":"李艳",
				"tel":"17589568956"
			}];
		}
		//异步获取所属企业的方法
		function getCompanyList() {
			$.ajax({
				url: 'http://127.0.0.1:8080/a/warn/person/view/getAllCompany?type=1',
				dataType: "JSON",
				type: "GET",
				cache: false,
				async: false,
				success: function(data) {
					companyList = data;
				},
				error: function() {
					layer.close(loading);
					layer.msg('加载列表数据错误');
				}
			})
		}

		//创建企业列表
		function formCompanyList() {
			var html = '';
			console.log(companyList);
			for(var i = 0; i < companyList.length; i++) {
				var temp = companyList[i];
				html += '<li onclick="getPeople(this,' + temp.id + ',' + i + ')">' + temp.name + '</li>';
			}
			$('#companyList').html(html);
			scrollCompanyList();
		}
		//判断公司列表是否需要添加滚动条
		function scrollCompanyList() {
			var len=$('#companyList li').length;
			$('#companyList').slimScroll({
					color: 'rgba(0,0,0,0.8)',
					size: '5px',
					height: '700px',
					width: '100%',
					alwaysVisible: true,
					borderRadius: '0px', //滚动条圆角
			});
		}
		
		//获取人员列表
		function getPeople(obj, companyId, index) {
			$('#companyList li').removeClass('active');
			$(obj).addClass('active');
			$('.conpanyListContainer').show();
			currentPeopleList=ajaxGetPeople(companyId);
			formPeopleList(companyId, index,currentPeopleList);
		}
		//创建人员列表
		function formPeopleList(companyId, index,peopleList) {
			var html = '';
//			var peopleList = companyList[index].plist;
			for(var i = 0; i < peopleList.length; i++) {
				var temp = peopleList[i];
				html += '<tr><td class="w100">' + temp.job + '</td><td class="w100">' + temp.name + '</td><td class="w100">' + temp.tel + '</td>' +
					'<td style="width:90px;padding-left:20px;"><span  title="编辑" class="stopuse hover"  onclick="edit(this,' + companyId + ',\'' + index + '\',\''+i+'\')"><i class="icon icon_edit blue"></i></span>' +
					'<span  title="删除" style="margin-left:20px;" class="stopuse hover"  onclick="deletePeople(this,' + companyId + ',\'' + index + '\',\''+i+'\')"><i class="icon icon_delete blue"></i></span></td></tr>';
			}
			$('#peopleList').html(html);
			$('.addPeople').attr('companyIndex',index);
			$('.addPeople').attr('companyId',companyId);
		}
		//添加预警人员弹框
		function addPeople(obj){
			var companyIndex=$(obj).attr("companyIndex");
			var companyId=$(obj).attr("companyId");
			peopleDialog(companyIndex,companyId);
		}
		//编辑预警人员弹框
		function edit(obj,companyId,companyIndex,peopleIndex){
			var editObj=currentPeopleList[peopleIndex];
			editObj.peopleIndex=peopleIndex;
			peopleDialog(companyIndex,companyId,editObj);
		}
		
		function peopleDialog(companyIndex,companyId,editObj){
			var html='<div class="form" style="margin:20px;"><form class="block-form" id="peopleForm">'+
			'<div style="margin-top:0px"><label class="inline-block w70">所属企业：</label><span id="companyName" style="color:#17a3d7"></span></div>'+
			'<div><label class="inline-block w70"><span class="red">*</span>姓名：</label><input type="text" style="width:120px" name="pname" /></div>'+
			'<div><label class="inline-block w70"><span class="red">*</span>职位：</label><input type="text" style="width:120px" name="pjob" /></div>'+
			'<div><label class="inline-block w70"><span class="red">*</span>手机号：</label><input type="text" style="width:120px" name="ptel" /></div>'+
			'<div style="margin-top:40px;"><label class="inline-block w70"></label><input type="button" value="保存" class="search-input-button bgblue" id="subButton" /><input type="button" value="取消" class="search-input-button" id="backButton" /></div>'+
			'</form></div>';
			layObj.content(390, 300, '添加事件', html, '', function() {
				addPeopleInfo(companyIndex,companyId,editObj)
			});
		}
		
		//添加预警人员
		function addPeopleInfo(companyIndex,companyId,editObj){
			editObj=editObj?editObj:'';
			var companyName=companyList[companyIndex].name;
				console.log(companyName);
			$('#companyName').html(companyName);
			console.log(editObj);
			if(editObj){
				$('input[name=pname]').val(editObj.name);$('input[name=pjob]').val(editObj.job);$('input[name=ptel]').val(editObj.tel)
			}
			
			$('#subButton').click(function(){
				var pname=$('input[name=pname]').val();
				var pjob=$('input[name=pjob]').val();
				var ptel=$('input[name=ptel]').val();
				var params={
					'id':'',
					"name":pname,
					"job":pjob,
					"tel":ptel,
				}
				$('.error').remove();
				var errorcount=0;
				if(!pname){
					errorcount++;
					$('input[name=pname]').after("<span class='error red'><i class=\" icon icon_error_red \"></i>请填写姓名</span>");
				}else if(pname.length>6){
					errorcount++;
					$('input[name=pname]').after("<span class='error red'><i class=\" icon icon_error_red \"></i>姓名最多6个字</span>");
				}
				
				if(!pjob){
					errorcount++;
					$('input[name=pjob]').after("<span class='error red'><i class=\" icon icon_error_red \"></i>请填写职位</span>");
				}else if(pname.length>6){
					errorcount++;
					$('input[name=pjob]').after("<span class='error red'><i class=\" icon icon_error_red \"></i>职位最多6个字</span>");
				}
				
				if(!ptel){
					errorcount++;
					$('input[name=ptel]').after("<span class='error red'><i class=\" icon icon_error_red \"></i>请填写电话</span>");
				}else{
					 var partten = /^1\d{10}$/;
					if(!partten.test(ptel)){
						errorcount++;
						$('input[name=ptel]').after("<span class='error red'><i class=\" icon icon_error_red \"></i>手机号码格式不正确</span>");
					}
					
				}
				
				if(errorcount!=0){
					return false;
				}
			
			if(editObj){
				var count=editObj.peopleIndex;
				var trObj=$('#peopleList tr').eq(count);
				trObj.find('td').eq(0).html(pjob);
				trObj.find('td').eq(1).html(pname);
				trObj.find('td').eq(2).html(ptel);
				currentPeopleList[count].name=pname;
				currentPeopleList[count].job=pjob;
				currentPeopleList[count].tel=ptel;
				params.id=currentPeopleList[count].id;
				ajaxAEPeople(companyId,params,currentPeopleList[count].id);
			}else{
				var addedId=ajaxAEPeople(companyId,params);
				params.id=addedId;
				currentPeopleList.push(params);
				var i=currentPeopleList.length-1;
				var html = '<tr><td class="w100">' + pjob + '</td><td class="w100">' + pname + '</td><td class="w100">' + ptel + '</td>' +
					'<td style="width:90px;padding-left:20px;"><span  title="编辑" class="stopuse hover"  onclick="edit(this,' + companyId + ',\'' + companyIndex + '\',\''+i+'\')"><i class="icon icon_edit blue"></i></span>' +
					'<span  title="删除" style="margin-left:20px;" class="stopuse hover"  onclick="deletePeople(this,' + companyId + ',\'' + companyIndex + '\',\''+i+'\')"><i class="icon icon_delete blue"></i></span></td></tr>';
				$("#peopleList").append(html);
			}
			layer.closeAll();
			});
		    $('#backButton').click(function(){
		    	layer.closeAll();
		    })
		}


		//删除预警人员弹框
		function deletePeople(obj,companyId,companyIndex,peopleIndex){
			var yesFun={
				'msg':'确定',
				"callback":function(layeo,index){
					var trObj=$('#peopleList tr').eq(peopleIndex);
					$(trObj).remove();
					ajaxDeletePeople(companyId,currentPeopleList[peopleIndex].id);
					currentPeopleList.splice(peopleIndex,1);
					layer.closeAll();
				}
			};
			var noFun={
				'msg':'确定',
				"callback":function(layeo,index){
					layer.closeAll();
				}
			};
			layObj.confirm("确定删除联系人"+currentPeopleList[peopleIndex].name+"吗?", '删除', 400, 180, 'confirmclass', yesFun, noFun)
			
		}
		
		
		$(function() {
			getCompanyList();
			formCompanyList();
		})
	</script>

</html>